import React, { Component } from "react";

class Formtwo extends Component {
  state = {
    username: "",
    pwd: "",
  };

  //   getusername = (e) => {
  //     let username = e.target.value;
  //     this.setState({
  //       username: username,
  //     });
  //   };

  //   getpwd = (e) => {
  //     let pwd = e.target.value;
  //     this.setState({
  //       pwd: pwd,
  //     });
  //   };

  getdata = (prop) => {
    return (e) => {
      this.setState({
        [prop]: e.target.value,
      });
    };
  };

  login = () => {
    let user = this.state.username;
    let pwd = this.state.pwd;
    alert(`您的账号是：${user},您的密码是：${pwd}`);
  };

  react = () => {
    this.setState({
      username: "",
      pwd: "",
    });
  };

  render() {
    return (
      <>
        <h1>这是一个受控组件儿</h1>
        <input
          value={this.state.username}
          onChange={this.getdata("username")}
          type="text"
          placeholder="账号"
        />
        <br /> <br />
        <input
          value={this.state.pwd}
          onChange={this.getdata("pwd")}
          type="password"
          placeholder="密码"
        />
        <br /> <br />
        <button onClick={this.login}>登 录</button>
        <button onClick={this.react}>重置</button>
      </>
    );
  }
}

export default Formtwo;
